<template>
  <div class="home-page">
    <!-- 顶部导航 -->
    <van-nav-bar :title="t('home.title')" :border="false" class="custom-nav">
      <template #right>
        <div class="nav-actions">
          <van-dropdown-menu
            overlay-style="background: var(--background-color)"
            :active-color="'var(--primary-color)'"
          >
            <van-dropdown-item
              v-model="currentLanguage"
              :options="languageOptions"
              @change="onLanguageChange"
            />
          </van-dropdown-menu>
          <van-icon
            name="setting-o"
            size="18"
            class="setting-icon"
            @click="onSettingClick"
          />
        </div>
      </template>
    </van-nav-bar>

    <div class="page-content">
      <!-- 用户信息卡片 -->
      <div class="user-card card">
        <div class="user-info">
          <img
            src="https://fastly.jsdelivr.net/npm/@vant/assets/logo.png"
            class="avatar"
          />
          <div class="info">
            <h3>尊敬的用户</h3>
            <p>欢迎使用智能运动系统</p>
          </div>
        </div>
        <!-- <div class="device-status">
          <van-tag type="primary" round>设备已连接</van-tag>
        </div> -->
      </div>

      <!-- 快捷功能区 -->
      <!-- <div class="quick-actions">
        <div class="section-header">
          <h3 class="section-title">快捷功能</h3>
        </div>
        <div class="action-grid">
          <div
            v-for="(action, index) in quickActions"
            :key="index"
            class="action-item card"
            @click="action.onClick"
          >
            <van-icon :name="action.icon" :class="action.class" />
            <span>{{ action.title }}</span>
          </div>
        </div>
      </div> -->

      <!-- 服务中心 -->
      <div class="service-section">
        <div class="section-header">
          <h3 class="section-title">服务中心</h3>
          <van-button
            size="small"
            round
            plain
            hairline
            type="primary"
            @click="viewAllServices"
          >
            查看全部
          </van-button>
        </div>
        <div class="service-grid">
          <div
            v-for="(service, index) in services"
            :key="index"
            class="service-item card"
            @click="service.onClick"
          >
            <div class="service-icon" :class="service.class">
              <van-icon :name="service.icon" />
            </div>
            <div class="service-info">
              <h4>{{ service.title }}</h4>
              <p>{{ service.desc }}</p>
            </div>
            <van-icon name="arrow" class="arrow-icon" />
          </div>
        </div>
      </div>

      <!-- 活动推荐 -->
      <!-- <div class="activity-section">
        <div class="section-header">
          <h3 class="section-title">活动推荐</h3>
        </div>
        <div class="activity-list">
          <div
            v-for="(activity, index) in activities"
            :key="index"
            class="activity-card card"
            @click="activity.onClick"
          >
            <img
              :src="activity.image"
              :alt="activity.title"
              class="activity-image"
            />
            <div class="activity-info">
              <h4>{{ activity.title }}</h4>
              <p>{{ activity.desc }}</p>
              <van-tag :type="activity.tagType" round>{{
                activity.tag
              }}</van-tag>
            </div>
          </div>
        </div>
      </div> -->
    </div>
    <van-dialog v-model:show="showModal" title="智能助手" show-cancel-button>
      <iframe
        src="http://difydev.aliyu.vip/chatbot/09w6Wsx3fuLZ2l78"
        style="width: 100%; height: 100%; min-height: 700px"
        frameborder="0"
        allow="microphone"
      >
      </iframe>
      <template #footer>
        <div class="custom-dialog-footer">
          <van-button type="primary" block @click="showModal = false">
            关闭
          </van-button>
        </div>
      </template>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter, useRoute } from "vue-router";
import { showToast } from "vant";
import { getStoredLanguage, setLanguage } from "../utils/language";

const { t, locale } = useI18n();
const router = useRouter();
const route = useRoute();

// 获取当前语言 - 优先级：URL参数 > localStorage > 默认英文
const currentLang = route.query.lang || getStoredLanguage();

// 语言选项
const currentLanguage = ref(currentLang);
const languageOptions = [
  { text: "中文", value: "zh" },
  { text: "English", value: "en" },
];

// 组件挂载后确保URL和localStorage一致
onMounted(() => {
  // 如果URL没有语言参数，但localStorage中有，则添加到URL
  if (!route.query.lang && currentLang) {
    router.replace({
      path: route.path,
      query: { ...route.query, lang: currentLang },
    });
  }
});

// 生成带语言参数的路径
const getLocalizedPath = (path) => {
  return {
    path: path,
    query: { lang: currentLanguage.value },
  };
};

// 语言切换
const onLanguageChange = (value) => {
  // 保存到localStorage
  setLanguage(value);

  // 更新i18n的locale
  locale.value = value;

  // 跳转到新路径（保持当前路径但更新查询参数）
  router.push({
    path: route.path,
    query: { ...route.query, lang: value },
  });
};

// 快捷功能
const quickActions = [
  {
    icon: "scan",
    title: "扫码配对",
    class: "icon-blue",
    onClick: () => showToast("扫码配对"),
  },
  {
    icon: "chart-trending-o",
    title: "数据分析",
    class: "icon-green",
    onClick: () => showToast("数据分析"),
  },
  {
    icon: "clock-o",
    title: "运动计划",
    class: "icon-orange",
    onClick: () => showToast("运动计划"),
  },
  {
    icon: "medal-o",
    title: "我的成就",
    class: "icon-purple",
    onClick: () => showToast("我的成就"),
  },
];
const showModal = ref(false);
// 服务中心
const services = [
  {
    icon: "wap-nav",
    title: "维修工单",
    desc: "设备维修与售后服务",
    class: "icon-orange",
    onClick: () => router.push(getLocalizedPath("/repair")),
  },
  {
    icon: "smile",
    title: "智能AI",
    desc: "智能AI为您解决问题",
    class: "icon-blue",
    onClick: () => (showModal.value = true),
  },
  // {
  //   icon: "service",
  //   title: "专家服务",
  //   desc: "专业客服为您解答",
  //   class: "icon-blue",
  //   onClick: () => router.push(getLocalizedPath("/service/expert")),
  // },
  {
    icon: "service",
    title: "常见问题",
    desc: "产品常见问题",
    class: "icon-blue",
    onClick: () => router.push(getLocalizedPath("/serviceFaq")),
  },
  {
    icon: "video",
    title: "教学视频",
    desc: "新手入门必看",
    class: "icon-green",
    onClick: () => router.push(getLocalizedPath("/service/video")),
  },
  // {
  //   icon: "description",
  //   title: "使用手册",
  //   desc: "功能详细说明",
  //   class: "icon-orange",
  //   onClick: () => router.push(getLocalizedPath("/service/manual")),
  // },
  // {
  //   icon: "comment",
  //   title: "问题反馈",
  //   desc: "有任何问题请联系我们",
  //   class: "icon-purple",
  //   onClick: () => router.push(getLocalizedPath("/service/feedback")),
  // },
];

// 活动推荐
const activities = [
  {
    image: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
    title: "新手训练营",
    desc: "7天训练计划，专业教练指导",
    tag: "进行中",
    tagType: "success",
    onClick: () => showToast("新手训练营"),
  },
  {
    image: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
    title: "春季健康挑战",
    desc: "完成挑战赢好礼",
    tag: "即将开始",
    tagType: "warning",
    onClick: () => showToast("春季健康挑战"),
  },
];

const onSettingClick = () => {
  showToast("设置");
};

const viewAllServices = () => {
  router.push(getLocalizedPath("/service"));
};
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  background: var(--background-color);
}

.custom-nav {
  background: transparent;
}

.page-content {
  padding: 1rem;
}

.card {
  background: rgba(16, 32, 58, 0.7);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.section-title {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 600;
  margin: 1rem 0;
}

/* 用户信息卡片 */
.user-card {
  padding: 1rem;
  margin-bottom: 1.5rem;
  background: rgba(16, 32, 58, 0.7);
  backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 12px;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  margin-right: 1rem;
  background: #fff;
  padding: 0.25rem;
}

.info h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.info p {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  opacity: 0.9;
}

/* 快捷功能 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.5rem;
  cursor: pointer;
  background: rgba(16, 32, 58, 0.7);
}

.action-item .van-icon {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.action-item span {
  font-size: 0.75rem;
  color: #fff;
}

/* 服务中心 */
.service-grid {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.service-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
}

.service-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  background: var(--primary-color) !important;
}

.service-icon .van-icon {
  font-size: 1.25rem;
  color: #fff;
}

.service-info {
  flex: 1;
}

.service-info h4 {
  margin: 0;
  font-size: 0.875rem;
  color: #fff;
}

.service-info p {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

/* 活动推荐 */
.activity-list {
  display: grid;
  gap: 0.75rem;
}

.activity-card {
  overflow: hidden;
}

.activity-image {
  width: 100%;
  height: 8rem;
  object-fit: cover;
}

.activity-info {
  padding: 0.75rem;
}

.activity-info h4 {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-color);
}

.activity-info p {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.75rem;
  color: var(--text-color-secondary);
}

/* 图标颜色 */
.icon-blue,
.icon-green,
.icon-orange,
.icon-purple {
  color: var(--primary-color);
  background: rgba(0, 229, 255, 0.2);
}

.service-icon.icon-blue,
.service-icon.icon-green,
.service-icon.icon-orange,
.service-icon.icon-purple {
  background: var(--primary-color);
}

.arrow-icon {
  color: var(--info-color);
}

:deep(.van-button--plain) {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.nav-actions {
  display: flex;
  align-items: center;
}

.setting-icon {
  margin-left: 0.5rem;
}

:deep(.van-dropdown-menu) {
  background: transparent;
  height: 100%;
}

:deep(.van-dropdown-menu__bar) {
  background: transparent;
  box-shadow: none;
}

:deep(.van-dropdown-menu__title) {
  color: var(--text-color);
}

:deep(.van-dialog) {
  top: 50%;
  width: 100%;
  max-width: 100%;
}
</style> 